<!-- MessageHeader.vue -->
<template>
  <header class="message-header">
    <h1>课程互动论坛</h1>
    <div class="user-info" v-if="isLoggedIn">
      <img :src="userAvatar" alt="User Avatar" class="avatar" />
      <span>{{ userName }}</span>
      <!-- 添加登出按钮或其他导航项 -->
    </div>
  </header>
</template>

<script setup lang="ts">
import { computed, toRefs } from 'vue';
//   import { useUserStore } from '@/stores/user-store.js'; // 假设存在一个用户状态管理store
import { useStore } from 'vuex'
const store = useStore();
//   const userStore = useUserStore();
//   const { isLoggedIn, user: { avatar: userAvatar, name: userName } } = toRefs(userStore);

// 如果使用Vuex，这里可能需要从store中获取用户信息
const isLoggedIn = computed(() => true);
const userAvatar = computed(() => store.state.user.avatar);
const userName = computed(() => store.state.user.name);
</script>

<style scoped>
.message-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

.user-info {
  display: flex;
  align-items: center;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.5rem;
}
</style>